<script setup lang="ts">
import { Plus, Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useColumns } from "./utils/columns";
import createDept from "./components/dialog/createDept.vue";
// import { updateEnableStatus } from "@/api/lot/model/useColumns";
import { message } from "@/utils/message";
import { useRouter } from "vue-router";
const tableRef = ref();
const {
  listQuery,
  columns,
  pagination,
  getList,
  handleSizeChange,
  handleCurrentChange,
  handleFilter,
  listLoading,
  listData,
  handleDelete,
  dialogDeleteVisible,
  confirmDelete
} = useColumns();
const createDeptRef = ref(null);
const router = useRouter();
const openAddEditDialog = (row) => {
  createDeptRef.value.openDialog(row);
};

const handleRefresh = () => {
  console.log("刷新");
  getList();
};
const handleUpdate = row => {

  const id = row.id
  router.push({ name: "gatewayDetail", query: { id: id } });
};
const onChange = row => {
  updateEnableStatus(row.id).then(res => {
    if (res.resp_code == 200) {
      message(res.resp_msg, { type: "success" });
      getList();
    } else {
      message(res.resp_msg, { type: "error" });
    }
  });
};
</script>

<template>
  <div class="main">
    <div class="right">
      <div class="right-top">
        <div class="right-top-left">
          <el-form :inline="true" :model="listQuery">
            <el-form-item prop="deviceModelNameOrCode">
              <el-input v-model.trim="listQuery.deptName" class="searchInput" placeholder="请输入部门名称搜索"
                :suffix-icon="Search" @change="handleFilter" @blur="handleFilter" @keyup.enter.native="handleFilter"
                @suffix-icon-click="handleFilter" />
            </el-form-item>
          </el-form>
        </div>
        <div class="rigth-top-right">
          <el-button :icon="Plus" @click="openAddEditDialog()">新增 </el-button>
        </div>
      </div>
      <div class="right-content">
        <PureTableBar :columns="columns" @refresh="getList">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table default-expand-all ref="tableRef" row-key="id" adaptive table-layout="auto"
              :loading="listLoading" :size="size" :data="listData" :columns="dynamicColumns"
              :pagination="{ ...pagination, size }" :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
              <template #gatewayEnableStatus="{ row }">
                <el-switch v-model="row.gatewayEnableStatus" :active-value="'1'" :inactive-value="'0'" inline-prompt
                  @change="onChange(row)" />
              </template>
              <template #operation="{ row }">
                <el-button class="reset-margin" link type="primary" @click="openAddEditDialog(row)">
                  修改
                </el-button>
                <el-button class="reset-margin" link type="danger" v-if="!row.children" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>


    <!-- 添加 -->
    <create-dept ref="createDeptRef" @refresh="handleRefresh" :listData="listData" @update="getList" />
    <!-- 添加 -->
  </div>

</template>

<style scoped lang="scss">
.main {
  .right {
    display: flex;
    flex-direction: column;

    .right-top {
      height: 68px;
      background: var(--el-bg-color);
      border-radius: 3px 3px 3px 3px;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      ::v-deep .el-form-item {
        margin-bottom: 0 !important;
      }
    }

    .right-content {
      flex: 1;
      margin-top: 16px;
      background-color: var(--el-bg-color);
      border-radius: 3px 3px 3px 3px;
    }
  }
}
</style>
